<template>
      <div class="container">
        <div class="wrapper" @click="close()">
          <swiper :options="swiperOption">
            <swiper-slide><img src="http://img1.qunarzz.com/sight/p0/1811/be/bed07cf557c93933a3.water.jpg_r_800x800_ba07dded.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="http://img1.qunarzz.com/sight/p0/1811/50/5033016fced6d4e7a3.water.jpg_r_800x800_d595f004.jpg" alt=""></swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>
      </div>
</template>

<script>
    export default {
        name: "gallary",
        data () {
            return {
              swiperOption:{
                //和官网swiper配置一模一样
                pagination:".swiper-pagination",
                paginationType : 'fraction',
                loop:true,
                observeParents:true,
                observer:true
              }
            }
        },
      methods:{
          close () {
            this.$emit("closeSwiper")
          }
      }
    }
</script>
<style lang="stylus" scoped>
  .container >>> .swiper-container{
    overflow:inherit;
  }
    .container >>> .swiper-pagination-fraction{
      color:white;
      bottom:-.5rem;
    }
   .container{
       display :flex;
       flex-direction:column;
       justify-content :center;
       width: 100%;
       background:black;
       position:absolute;
       left:0;
       top:0;
       bottom:0;
       .wrapper{
         width: 100%;
         background :white;
         img{
           width: 100%;
         }
       }
   }
</style>
